<template>
  <div id="app">
    <el-config-provider :locale="zhCn">
      <router-view v-if="route?.meta?.isFull || !route?.meta?.needLogin"></router-view>
      <el-watermark class="tw-layout" id="watermark" :font="font" :content="watermark ? ['Teewom', 'Happy Working'] : ''" v-else>
        <component :is="LayoutComponents[layout]" />
        <ThemeDrawer />
      </el-watermark>
    </el-config-provider>
  </div>
</template>
<script setup name="App">
import { computed, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import ThemeDrawer from "@/layouts/components/ThemeDrawer/index.vue";
import LayoutVertical from "@/layouts/LayoutVertical/index.vue";
import LayoutClassic from "@/layouts/LayoutClassic/index.vue";
import LayoutTransverse from "@/layouts/LayoutTransverse/index.vue";
import LayoutColumns from "@/layouts/LayoutColumns/index.vue";
import { useStore } from 'vuex';

const store = useStore();
const route = useRoute();

const LayoutComponents = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns
};

const isDark = computed(() => store.state.layouts.globalState.isDark);
const layout = computed(() => store.state.layouts.globalState.layout);
const watermark = computed(() => store.state.layouts.globalState.watermark);

const font = reactive({ color: "rgba(0, 0, 0, .15)" });
watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
  immediate: true
});
$app.getLocalAuth()
</script>

<style lang="scss">
@use './styles/icon.scss' as *;
@use './styles/iconlayout.scss' as *;
@use '../materials/questions/common/css/icon.scss' as *;
@use './styles/reset.scss' as *;
@use './styles/app.scss' as *;

html {
  font-size: 50px;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // font-size: 14px;
}

*,
a:hover * {
  text-decoration: none;
}

.tw-layout {
  width: 100%;
  height: 100%
}
</style>
